/**
 * Created by JetBrains PhpStorm.
 * User: taoqili
 * Date: 12-01-08
 * Time: 下午2:52
 * To change this template use File | Settings | File Templates.
 */
var imageUploader = {};
(function () {
    var g = $G,
            ajax = parent.baidu.editor.ajax,
            maskIframe = g( "maskIframe" ), //tab遮罩层,用来解决flash和其他dom元素的z-index层级不一致问题
            flashObj;               //flash上传对象

    var flagImg = null,flashContainer;
    imageUploader.init = function ( opt, callbacks ) {
        switchTab( "imageTab" );
        createAlignButton( ["remoteFloat", "localFloat"] );
        createFlash( opt, callbacks );
        var srcImg = editor.selection.getRange().getClosedNode();
        if ( srcImg ) {
            showImageInfo( srcImg );
            showPreviewImage( srcImg, true );
            var tabElements = g( "imageTab" ).children,
                            tabHeads = tabElements[0].children,
                            tabBodys = tabElements[1].children;
            for(var i=0,ci;ci = tabHeads[i++];){
                if(ci.getAttribute("tabSrc")=="remote"){
                    clickHandler(tabHeads,tabBodys,ci);
                }
            }

        }
        addUrlChangeListener();
        addUploadListener();
        addOKListener();
        addScrollListener();
        addSearchListener();
        $focus( g( "url" ) );
    };

    function insertImage(imgObjs){
        editor.fireEvent('beforeInsertImage',imgObjs);
        editor.execCommand( "insertImage", imgObjs );
    }
    function searchImage() {
        var imgSearchInput = $G( "imgSearchTxt" );
        if ( !imgSearchInput.getAttribute( "hasClick" ) || !imgSearchInput.value ) {
            selectTxt( imgSearchInput );
            return;
        }
        g( "searchList" ).innerHTML = "<p class='msg'>" + lang.imageLoading + "</p>";
        var key = imgSearchInput.value,
                type = $G( "imgType" ).value,
                url = "http://image.baidu.com/i?ct=201326592&cl=2&lm=-1&st=-1&tn=baiduimagejson&istype=2&rn=32&fm=index&pv=&word=" + encodeToGb2312( key ) + type + "&" + +new Date;
        var reqCallBack = function ( data ) {
            try {
                var imgObjs = data.data;
            } catch ( e ) {
                return;
            }
            var frg = document.createDocumentFragment();
            if ( imgObjs.length < 2 ) {
                g( "searchList" ).innerHTML = "<p class='msg'>"+lang.tryAgain+"</p>";
                return;
            }
            for ( var i = 0, len = imgObjs.length; i < len - 1; i++ ) {
                var img = document.createElement( "img" ), obj = imgObjs[i], div = document.createElement( "div" );
                img.src = obj.objURL; //obj.thumbURL 为缩略图，只能针对百度内部使用
                img.setAttribute( "sourceUrl", obj.objURL );
                var title = obj.fromPageTitleEnc.replace( /^\.\.\./i, "" );
                img.setAttribute( "title", lang.toggleSelect + obj.width + "X" + obj.height );
                img.onclick = function () {
                    changeSelected( this );
                };
                scale( img, 100, obj.width, obj.height );
                div.appendChild( img );
                var p = document.createElement( "p" );
                p.innerHTML = "<a target='_blank' href='" + obj.fromURL + "'>" + title + "</a>";
                div.appendChild( p );
                //setTimeout(function(){
                frg.appendChild( div );
                //},0);

            }
            g( "searchList" ).innerHTML = "";
            g( "searchList" ).appendChild( frg );
        };
        baidu.sio.callByServer( url, reqCallBack, {charset:"GB18030"} );
    }

    function selectTxt( node ) {
        if ( node.select ) {
            node.select();
        } else {
            var r = node.createTextRange && node.createTextRange();
            r.select();
        }
    }

    function addSearchListener() {
        g( "imgSearchTxt" ).onclick = function () {
            selectTxt( this );
            this.setAttribute( "hasClick", true );
            if ( this.value == lang.searchInitInfo ) {
                this.value = "";
            }
        };
        g( "imgSearchTxt" ).onkeyup = function () {
            this.setAttribute( "hasClick", true );
            //只触发一次
            this.onkeyup = null;
        };

        g( "imgSearchBtn" ).onclick = function () {
            searchImage();
        };
        g( "imgSearchReset" ).onclick = function () {
            var txt = g( "imgSearchTxt" );
            txt.value = "";
            txt.focus();
            g( "searchList" ).innerHTML = "";
        };
        g( "imgType" ).onchange = function () {
            searchImage();
        };
        domUtils.on( g( "imgSearchTxt" ), "keyup", function ( evt ) {
            if ( evt.keyCode == 13 ) {
                searchImage();
            }
        } )

    }

    /**
     * 延迟加载
     */
    function addScrollListener() {

        g( "imageList" ).onscroll = function () {
            var imgs = this.getElementsByTagName( "img" ),
                    top = Math.ceil( this.scrollTop / 100 ) - 1;
            top = top < 0 ? 0 : top;
            for ( var i = top * 5; i < (top + 5) * 5; i++ ) {
                var img = imgs[i];
                if ( img && !img.getAttribute( "src" ) ) {
                    img.src = img.getAttribute( "lazy_src" );
                    img.removeAttribute( "lazy_src" );
                }
            }
        }
    }

    /**
     * 绑定确认按钮
     */
    function addOKListener() {
        dialog.onok = function () {
            var currentTab = findFocus( "tabHeads", "tabSrc" );
            switch ( currentTab ) {
                case "remote":
                    return insertSingle();
                    break;
                case "local":
                    return insertBatch();
                    break;
                case "imgManager":
                    return insertSearch( "imageList" );
                    break;
                case "imgSearch":
                    return insertSearch( "searchList", true );
                    break;
            }
        };
        dialog.oncancel = function(){
            hideFlash();
        }
    }

    function hideFlash(){
        flashObj = null;
        flashContainer.innerHTML = "";
    }

    /**
     * 将元素id下的所有图片文件插入到编辑器中。
     * @param id
     * @param catchRemote  是否需要替换远程图片
     */
    function insertSearch( id, catchRemote ) {
        var imgs = $G( id ).getElementsByTagName( "img" ), imgObjs = [];
        for ( var i = 0, ci; ci = imgs[i++]; ) {
            if ( ci.getAttribute( "selected" ) ) {
                var url = ci.getAttribute( "src", 2 ).replace( /(\s*$)/g, "" ), img = {};
                img.src = url;
                img.data_ue_src = url;
                imgObjs.push( img );
            }
        }
        insertImage(imgObjs);
        catchRemote && editor.fireEvent( "catchRemoteImage" );
        hideFlash();
    }

    /**
     * 插入单张图片
     */
    function insertSingle() {
        var url = g( "url" ),
                width = g( "width" ),
                height = g( "height" ),
                border = g( "border" ),
                vhSpace = g( "vhSpace" ),
                title = g( "title" ),
                align = findFocus( "remoteFloat", "name" ),
                imgObj = {};
        if ( !url.value ) return;
        if ( !flagImg ) return;   //粘贴地址后如果没有生成对应的预览图，可以认为本次粘贴地址失败
        if ( !checkNum( [width, height, border, vhSpace] ) ) return false;
        imgObj.src = url.value;
        imgObj.data_ue_src = url.value;
        imgObj.width = width.value;
        imgObj.height = height.value;
        imgObj.border = border.value;
        imgObj.floatStyle = align;
        imgObj.vspace = imgObj.hspace = vhSpace.value;
        imgObj.title = title.value;
        imgObj.style = "width:" + width.value + "px;height:" + height.value + "px;";
        insertImage(imgObj);
        editor.fireEvent( "catchRemoteImage" );
        hideFlash();
    }

    /**
     * 检测传入的所有input框中输入的长宽是否是正数
     * @param nodes input框集合，
     */
    function checkNum( nodes ) {
        for ( var i = 0, ci; ci = nodes[i++]; ) {
            if ( !isNumber( ci.value ) || ci.value < 0 ) {
                alert(lang.numError);
                ci.value = "";
                ci.focus();
                return false;
            }
        }
        return true;
    }

    /**
     * 数字判断
     * @param value
     */
    function isNumber( value ) {
        return /(0|^[1-9]\d*$)/.test( value );
    }

    /**
     * 插入多张图片
     */
    function insertBatch() {
        if ( imageUrls.length < 1 ) return;
        var imgObjs = [],
                align = findFocus( "localFloat", "name" );

        for ( var i = 0, ci; ci = imageUrls[i++]; ) {
            var tmpObj = {};
            tmpObj.title = ci.title;
            tmpObj.floatStyle = align;
            //修正显示时候的地址数据,如果后台返回的是图片的绝对地址，那么此处无需修正
            tmpObj.data_ue_src = tmpObj.src = editor.options.imagePath + ci.url;
            imgObjs.push( tmpObj );
        }
        insertImage(imgObjs);
        hideFlash();
    }

    /**
     * 找到id下具有focus类的节点并返回该节点下的某个属性
     * @param id
     * @param returnProperty
     */
    function findFocus( id, returnProperty ) {
        var tabs = g( id ).children,
                property;
        for ( var i = 0, ci; ci = tabs[i++]; ) {
            if ( ci.className == "focus" ) {
                property = ci.getAttribute( returnProperty );
                break;
            }
        }
        return property;
    }

    /**
     * 绑定开始上传事件
     */
    function addUploadListener() {
        g( "upload" ).onclick = function () {
            flashObj.upload();
            this.style.display = "none";
        };
    }

    /**
     * 绑定地址框改变事件
     */
    function addUrlChangeListener() {
        var value = g( "url" ).value;
        if ( browser.ie ) {
            g( "url" ).onpropertychange = function () {
                var v = this.value;
                if ( v != value ) {
                    createPreviewImage( v );
                    value = v;
                }
            };
        } else {
            g( "url" ).addEventListener( "input", function () {
                var v = this.value;
                if ( v != value ) {
                    createPreviewImage( v );
                    value = v;
                }
            }, false );
        }
    }

    /**
     * 绑定图片等比缩放事件
     * @param percent  缩放比例
     */
    function addSizeChangeListener( percent ) {
        var width = g( "width" ),
                height = g( "height" ),
                lock = g( 'lock' );
        width.onkeyup = function () {
            if ( !isNaN( this.value ) && lock.checked ) {
                height.value = Math.round( this.value / percent ) || this.value;
            }
        };
        height.onkeyup = function () {
            if ( !isNaN( this.value ) && lock.checked ) {
                width.value = Math.round( this.value * percent ) || this.value;
            }
        }
    }

    /**
     * 依据url中的地址创建一个预览图片并将对应的信息填入信息框和预览框
     */
    function createPreviewImage( url ) {
        if ( !url ) {
            flagImg = null;
            g( "preview" ).innerHTML = "";
            g( "width" ).value = "";
            g( "height" ).value = "";
            g( "border" ).value = "";
            g( "vhSpace" ).value = "";
            g( "title" ).value = "";
            $focus( g( "url" ) );
            return;
        }
        var img = document.createElement( "img" ),
                preview = g( "preview" );

        var imgTypeReg = /\.(png|gif|jpg|jpeg)$/gi, //格式过滤
                urlFilter = "";                                     //地址过滤
        if ( !imgTypeReg.test( url ) || url.indexOf( urlFilter ) == -1 ) {
            preview.innerHTML = "<span style='color: red'>"+lang.imageUrlError+"</span>";
            flagImg = null;
            return;
        }
        preview.innerHTML = lang.imageLoading;
        img.onload = function () {
            flagImg = this;
            showImageInfo( this );
            showPreviewImage( this );
            this.onload = null;
        };
        img.onerror = function () {
            preview.innerHTML = "<span style='color: red'>"+lang.imageLoadError+"</span>";
            flagImg = null;
            this.onerror = null;
        };
        img.src = url;
    }

    /**
     * 显示图片对象的信息
     * @param img
     */
    function showImageInfo( img ) {
        if ( !img.getAttribute( "src" ) || !img.src ) return;
        var wordImgFlag = img.getAttribute( "word_img" );
        g( "url" ).value = wordImgFlag ? wordImgFlag.replace( "&amp;", "&" ) : (img.getAttribute( 'data_ue_src' ) || img.getAttribute( "src", 2 ).replace( "&amp;", "&" ));
        g( "width" ).value = img.width || 0;
        g( "height" ).value = img.height || 0;
        g( "border" ).value = img.getAttribute( "border" ) || 0;
        g( "vhSpace" ).value = img.getAttribute( "vspace" ) || 0;
        g( "title" ).value = img.title || "";
        var align = editor.queryCommandValue( "imageFloat" ) || "none";
        updateAlignButton( align );

        //保存原始比例，用于等比缩放
        var percent = (img.width / img.height).toFixed( 2 );
        addSizeChangeListener( percent );
    }

    /**
     * 将img显示在预览框，
     * @param img
     * @param needClone  是否需要克隆后显示
     */
    function showPreviewImage( img, needClone ) {
        var tmpWidth = img.width, tmpHeight = img.height;
        if ( needClone ) {
            //针对编辑图片时
            img = img.cloneNode( true );
            img.width = tmpWidth;
            img.height = tmpHeight;
            flagImg = img;
        }
        var maxWidth = 262;
        scale( img, maxWidth, maxWidth, maxWidth );
        if ( (img.width + 2 * img.border) > maxWidth ) {
            img.width = maxWidth - 2 * img.border;
        }
        if ( (img.height + 2 * img.border) > maxWidth ) {
            img.height = maxWidth - 2 * img.border;
        }
        var preview = g( "preview" );
        preview.innerHTML = '<img src="' + img.src + '" width="' + img.width + '" height="' + img.height + '" border="' + img.border + 'px solid #000" />';
    }

    /**
     * 图片缩放
     * @param img
     * @param max
     */
    function scale( img, max, oWidth, oHeight ) {
        var width = 0, height = 0, percent, ow = img.width || oWidth, oh = img.height || oHeight;
        if ( ow > max || oh > max ) {
            if ( ow >= oh ) {
                if ( width = ow - max ) {
                    percent = (width / ow).toFixed( 2 );
                    img.height = oh - oh * percent;
                    img.width = max;
                }
            } else {
                if ( height = oh - max ) {
                    percent = (height / oh).toFixed( 2 );
                    img.width = ow - ow * percent;
                    img.height = max;
                }
            }
        }
    }

    /**
     * 创建flash实例
     * @param opt
     * @param callbacks
     */
    function createFlash( opt, callbacks ) {
        var i18n = utils.extend({},lang.flashI18n);
        //处理图片资源地址的编码，补全等问题
        for(var i in i18n){
            if(!(i in {"lang":1,"uploadingTF":1,"imageTF":1,"textEncoding":1}) && i18n[i]){
                i18n[i] = encodeURIComponent(editor.options.langPath + editor.options.lang + "/images/" + i18n[i]);
            }
        }
        opt = utils.extend(opt,i18n,false);
        var option = {
            createOptions:{
                id:'flash',
                url:opt.flashUrl,
                width:opt.width,
                height:opt.height,
                errorMessage:lang.flashError,
                wmode:browser.safari ? 'transparent' : 'window',
                ver:'10.0.0',
                vars:opt,
                container:opt.container
            }
        };
        flashContainer = $G(opt.container);
        option = utils.extend( option, callbacks, false );
        flashObj = new baidu.flash.imageUploader( option );
    }

    /**
     * 依据传入的align值更新按钮信息
     * @param align
     */
    function updateAlignButton( align ) {
        var aligns = g( "remoteFloat" ).children;
        for ( var i = 0, ci; ci = aligns[i++]; ) {
            if ( ci.getAttribute( "name" ) == align ) {
                if ( ci.className != "focus" ) {
                    ci.className = "focus";
                }
            } else {
                if ( ci.className == "focus" ) {
                    ci.className = "";
                }
            }
        }
    }

    /**
     * 创建图片浮动选择按钮
     * @param ids
     */
    function createAlignButton( ids ) {
        for ( var i = 0, ci; ci = ids[i++]; ) {
            var floatContainer = g( ci ),
                    nameMaps = {"none":lang.floatDefault, "left":lang.floatLeft, "right":lang.floatRight, "center":lang.floatCenter};
            for ( var j in nameMaps ) {
                var div = document.createElement( "div" );
                div.setAttribute( "name", j );
                if ( j == "none" ) div.className = "focus";
                div.style.cssText = "background:url(../../themes/default/images/" + j + "_focus.jpg);";
                div.setAttribute( "title", nameMaps[j] );
                floatContainer.appendChild( div );
            }
            switchSelect( ci );
        }
    }

    function toggleFlash(show){
        if(flashContainer && browser.webkit){
            flashContainer.style.left = show ? "0":"-10000px";
        }
    }

    /**
     * tab点击处理事件
     * @param tabHeads
     * @param tabBodys
     * @param obj
     */
    function clickHandler( tabHeads,tabBodys,obj ) {
        //head样式更改
        for ( var k = 0, len = tabHeads.length; k < len; k++ ) {
            tabHeads[k].className = "";
        }
        obj.className = "focus";
        //body显隐
        var tabSrc = obj.getAttribute( "tabSrc" );
        for ( var j = 0, length = tabBodys.length; j < length; j++ ) {
            var body = tabBodys[j],
                    id = body.getAttribute( "id" );
            body.onclick = function(){
                this.style.zoom = 1;
            };
            if ( id != tabSrc ) {
                body.style.zIndex = 1;
            } else {
                body.style.zIndex = 200;
                //当切换到本地图片上传时，隐藏遮罩用的iframe
                if ( id == "local" ) {
                    toggleFlash(true);
                    maskIframe.style.display = "none";
                    //处理确定按钮的状态
                    if ( selectedImageCount ) {
                        dialog.buttons[0].setDisabled( true );
                    }
                } else {
                    toggleFlash(false);
                    maskIframe.style.display = "";
                    dialog.buttons[0].setDisabled( false );
                }
                var list = g( "imageList" );
                list.style.display = "none";
                //切换到图片管理时，ajax请求后台图片列表
                if ( id == "imgManager" ) {
                    list.style.display = "";
                    //已经初始化过时不再重复提交请求
                    if ( !list.children.length ) {
                        ajax.request( editor.options.imageManagerUrl, {
                            timeout:100000,
                            action:"get",
                            onsuccess:function ( xhr ) {
                                //去除空格
                                var tmp = utils.trim(xhr.responseText),
                                        imageUrls = !tmp ? [] : tmp.split( "ue_separate_ue" ),
                                        length = imageUrls.length;
                                g( "imageList" ).innerHTML = !length ? "&nbsp;&nbsp;"+lang.noUploadImage : "";
                                for ( var k = 0, ci; ci = imageUrls[k++]; ) {
                                    var img = document.createElement( "img" );

                                    var div = document.createElement( "div" );
                                    div.appendChild( img );
                                    div.style.display = "none";
                                    g( "imageList" ).appendChild( div );
                                    img.onclick = function () {
                                        changeSelected( this );
                                    };
                                    img.onload = function () {
                                        this.parentNode.style.display = "";
                                        var w = this.width, h = this.height;
                                        scale( this, 100, 120, 80 );
                                        this.title = lang.toggleSelect + w + "X" + h;
                                    };
                                    img.setAttribute( k < 35 ? "src" : "lazy_src", editor.options.imageManagerPath + ci.replace(/\s+|\s+/ig,"") );
                                    img.setAttribute( "data_ue_src", editor.options.imageManagerPath + ci.replace(/\s+|\s+/ig,"") );

                                }
                            },
                            onerror:function () {
                                g( "imageList" ).innerHTML = lang.imageLoadError;
                            }
                        } );
                    }
                }
                if ( id == "imgSearch" ) {
                    selectTxt( g( "imgSearchTxt" ) );
                }
                if ( id == "remote" ) {
                    $focus( g( "url" ) );
                }
            }
        }

    }

    /**
     * TAB切换
     * @param tabParentId  tab的父节点ID或者对象本身
     */
    function switchTab( tabParentId ) {
        var tabElements = g( tabParentId ).children,
                tabHeads = tabElements[0].children,
                tabBodys = tabElements[1].children;

        for ( var i = 0, length = tabHeads.length; i < length; i++ ) {
            var head = tabHeads[i];
            if ( head.className === "focus" )clickHandler(tabHeads,tabBodys, head );
            head.onclick = function () {
                clickHandler(tabHeads,tabBodys,this);
            }
        }
    }

    /**
     * 改变o的选中状态
     * @param o
     */
    function changeSelected( o ) {
        if ( o.getAttribute( "selected" ) ) {
            o.removeAttribute( "selected" );
            o.style.cssText = "filter:alpha(Opacity=100);-moz-opacity:1;opacity: 1;border: 2px solid #fff";
        } else {
            o.setAttribute( "selected", "true" );
            o.style.cssText = "filter:alpha(Opacity=50);-moz-opacity:0.5;opacity: 0.5;border:2px solid blue;";
        }
    }

    /**
     * 选择切换，传入一个container的ID
     * @param selectParentId
     */
    function switchSelect( selectParentId ) {
        var select = g(selectParentId ),
                children = select.children;
        domUtils.on(select,"click",function(evt){
            var tar = evt.srcElement || evt.target;
            for ( var j = 0, cj; cj = children[j++]; ) {
                cj.className = "";
                cj.removeAttribute && cj.removeAttribute( "class" );
            }
            tar.className = "focus";

        });
    }

    /**
     * gb2312编码
     * @param str
     */
    function encodeToGb2312( str ) {
        var strOut = "";
        for ( var i = 0; i < str.length; i++ ) {
            var c = str.charAt( i ),
                    code = str.charCodeAt( i );
            if ( c == " " ) strOut += "+";
            else if ( code >= 19968 && code <= 40869 ) {
                var index = code - 19968;
                strOut += "%" + z.substr( index * 4, 2 ) + "%" + z.substr( index * 4 + 2, 2 );
            } else {
                strOut += "%" + str.charCodeAt( i ).toString( 16 );
            }
        }
        return strOut;
    }

    var z = '[encoded data, 83607 characters]';
})();
